﻿@section header {
    <link href="@Url.Content("/Content/central.querybuilder.css")" rel="stylesheet" type="text/css" />
}

@{
    ViewBag.Title = "Person";
}

<h2 data-bind="text: viewname"></h2>

<span data-bind="visible: isbusy">Loading...</span>
<span>Всего на пользователей: </span><span data-bind="text: items().length"></span>
<hr />
<div>
    <hgroup>
        <h3>Контролер: "<span data-bind="text: queryBuilder.controller"></span>"</h3>
        <h4>Действие: "<span data-bind="text: queryBuilder.action"></span>"</h4>
    </hgroup>
</div>

<div data-bind="querybuilder: queryBuilder"></div>

<hr />
<div data-bind="template: {name:'personTemplate', foreach: items}"></div>

@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/knockout.mapping-latest.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/central.core.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/central.utils.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/central.handlers.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/central.controls.js")"></script>)
@Html.ScriptBlock(@<script type="text/javascript" src="@Url.Content("~/Scripts/demo.vm.person.js")"></script>)

<script id="personTemplate" type="text/html">
    <div>
        <span data-bind="text: Name"></span>
        <span data-bind="text: Age"></span>
        <span data-bind="text: Country"></span>
        <span data-bind="text: IsMember"></span>
    </div>
</script>

<script id="filterManagerTemplate" type="text/html">
    <div class="ui-querybuilder-level0">
        <span data-bind="text: LogicalOperator"></span>
        <div data-bind="foreach: FilterParams">
            <div class="ui-querybuilder-filter">
                <span data-bind="text: DisplayName, attr: {title: Name}"></span>
                <span data-bind="text: Operator"></span>
                <span data-bind="text: Value"></span>
                <span class="close"></span>
            </div>
        </div>
        <div data-bind="template : {'name': 'filterManagerTemplate', foreach:  JsonFilterManagers}"></div>
    </div>
</script>
<script id="filterTemplate" type="text/html">
    <button data-bind="click: $root.deleteFilter">alert</button>
    <span data-bind="text: LogicalOperator"></span>
    <div data-bind="foreach:  FilterParams">
        <div class="ui-querybuilder-filter">
            <span data-bind="text: DisplayName, attr: {title: Name}"></span>
            <span data-bind="text: Operator"></span>
            <span data-bind="text: Value"></span>
            <span class="close"></span>
        </div>
    </div>
    <div data-bind="foreach: JsonFilterManagers">
        <div class="ui-querybuilder-level0">
            <button data-bind="click: $root.deleteFilter">alert</button>
            <span data-bind="text: LogicalOperator"></span>
            <div data-bind="foreach:  FilterParams">
                <div class="ui-querybuilder-filter">
                    <span data-bind="text: DisplayName, attr: {title: Name}"></span>
                    <span data-bind="text: Operator"></span>
                    <span data-bind="text: Value"></span>
                    <span class="close" data-bind="click: $root.deleteFilter"></span>
                </div>
            </div>
            <div data-bind="template : {'name': 'filterManagerTemplate', foreach:  JsonFilterManagers}"></div>
        </div>
    </div>
</script>

<script id="sorterTemplate" type="text/html">
    <div>
        <span class="ui-querybuilder-title">Сортировка</span>
        <div data-bind="foreach: SortParams">
            <div class="ui-querybuilder-filter">
                <span data-bind="text: DisplayName, attr: {title: Name}"></span>
                <span class="close"></span>
            </div>
        </div>
    </div>
</script>

<script id="grouperTemplate" type="text/html">
    <div>
        <span class="ui-querybuilder-title" data-bind="attr: {title: FieldNameForCount}">Группировка</span>
        <div data-bind="foreach: GroupParams">
            <div class="ui-querybuilder-filter">
                <span data-bind="text: DisplayName, attr: {title: FieldName}"></span>
                <span class="close"></span>
            </div>
        </div>
    </div>
</script>

<script id="queryTemplate" type="text/html">
    <span data-bind="text: EntityName" class="ui-querybuilder-entityname"></span>
</script>